<template>
	<view class="content">
		<view class="category">
			<view class="goodsBox">
				<view class="goods">
					<view class="goods-item">
						<view class="goods-item-header">
							<view style="font-size: 24rpx;color: rgba(37, 38, 38, 1);">订单编号：{{userInfo.no}}</view>
							<view style="font-size: 24rpx;color: rgba(145, 145, 145, 1);">已完成</view>
						</view>
						<view class="line"></view>
						<view class="tupian" v-for="(val, index ) in userInfo.imgs" :key="index">
							<u--image :src="val" width="120rpx" height="120rpx"
								style="display: inline-block;margin-right: 20rpx;"></u--image>
						</view>
						<view style="display: flex;justify-content: space-between;">
							<view class="goods-box">
								<view class="goods-item-text">订单日期：{{userInfo.create_time}}</view>
								<view class="box-let">
									<view class="box-let-text">种类：<span
											style="color: rgba(3, 185, 209, 1);">{{userInfo.total_kind}}</span>
									</view>
									<view class="box-let-text">数量：<span
											style="color: rgba(3, 185, 209, 1);">{{userInfo.total_num}}</span>
									</view>
									<view class="box-let-total">总计：<span
											style="color: rgba(3, 185, 209, 1);">￥{{userInfo.total_price}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="category-main">
				<view class="u-page__item">
					<u-collapse accordion :border="false">
						<u-collapse-item :border="false">
							<view slot="title">
								<view class="yuan"></view>
								<view class="slot-title">商品清单</view>
							</view>
							<text slot="value" class="u-page__item__title__slot">点击展开</text>
							<view class="u-collapse-content">
								<view class="goods">
									<view class="goods-item" @click="show = true"
										v-for="(item, index ) in userInfo.orderDetail" :key="index">
										<view class="tupian">
											<u--image :src="item.img" width="170rpx" height="170rpx"></u--image>
										</view>
										<view class="goods-box">
											<view class="goods-item-text">{{item.name}}</view>
											<view class="box-let">
												<view class="kucun">订购数量：{{item.quantity}}</view>
												<view class="box-let-text"><span style="font-size: 20rpx;
								font-weight: 500;">￥</span>{{item.amount}}</view>

											</view>
										</view>
									</view>
								</view>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
			<view class="category-footer">
				<view>
					<view class="yuan"></view>
					<view class="slot-title">收货信息</view>
				</view>
				<view style="font-size: 24rpx;color: rgba(51, 50, 50, 1);margin: 10rpx 0rpx;">
					联系人：{{userInfo && userInfo.user && userInfo.user.real_name ? userInfo.user.real_name : ''}}</view>
				<view style="font-size: 24rpx;color: rgba(51, 50, 50, 1);margin: 10rpx 0rpx;">
					联系方式：{{userInfo && userInfo.user && userInfo.user.mobile ? userInfo.user.mobile : ''}}</view>
				<view style="font-size: 24rpx;color: rgba(51, 50, 50, 1);margin: 10rpx 0rpx;">
					收货地址：{{userInfo && userInfo.user && userInfo.user.address ? userInfo.user.address : ''}}</view>
				<view style="font-size: 24rpx;color: rgba(51, 50, 50, 1);margin: 10rpx 0rpx;">
					订单备注：{{userInfo.remark}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		orderDetails
	} from "@/api/home.js"
	export default {
		data() {
			return {
				fromData: {
					id: ''
				},
				userInfo: {},
			}
		},
		onLoad(options) {
			this.fromData.id = options.id
		},
		created() {
			this.search()
		},
		methods: {
			search() {
				let params = {
					...this.fromData
				}
				orderDetails(params)
					.then(res => {
						this.userInfo = res.data
					})
			}
		}
	}
</script>
<style scoped lang="scss">
	.content {
		width: 100%;

		.category {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background: rgba(245, 246, 247, 1);

			.goodsBox {
				width: 100%;

				.goods {
					.goods-item {
						width: 692rpx;
						// height: 392rpx;
						border-radius: 20rpx;
						padding: 30rpx;
						box-sizing: border-box;
						background: rgba(255, 255, 255, 1);

						.goods-item-header {
							display: flex;
							justify-content: space-between;
						}

						.line {
							height: 2rpx;
							background: rgba(0, 0, 0, 0.05);
							margin: 20rpx 0rpx;
						}

						.tupian {
							display: inline-block;
							width: 120rpx;
							height: 120rpx;
							margin-right: 30rpx;
						}

						.goods-box {

							.goods-item-text {
								margin: 15rpx 0rpx;
								font-size: 20rpx;
								font-weight: 500;
								color: rgba(102, 102, 102, 1);
							}

							.box-let {
								.box-let-text {
									display: inline-block;
									margin-right: 20rpx;
									font-size: 20rpx;
									font-weight: 500;
									color: rgba(102, 102, 102, 1);
								}

								.box-let-total {
									font-size: 20rpx;
									font-weight: 500;
									color: rgba(102, 102, 102, 1);
									margin-top: 10rpx;
								}
							}
						}
					}
				}
			}

			.category-main {
				margin-top: 30rpx;
				border-radius: 20rpx;
				background: rgba(255, 255, 255, 1);
				position: relative;

				.yuan {
					position: absolute;
					top: 20rpx;
					left: 20rpx;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					background: rgba(3, 185, 209, 0.3);
				}

				.slot-title {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(37, 38, 38, 1);
				}

				.u-page {
					padding: 0;

					&__item {

						&__title {
							color: $u-tips-color;
							background-color: $u-bg-color;
							padding: 30rpx;
							font-size: 30rpx;

							&__slot-title {
								color: rgba(37, 38, 38, 1);
								font-size: 28rpx;
							}

							&__slot {
								color: rgba(3, 185, 209, 1);
								font-size: 24rpx;
							}
						}
					}
				}

				.u-collapse-content {
					.goods {
						.goods-item {
							border-bottom: 2rpx solid rgba(240, 240, 240, 1);

							.tupian {
								display: inline-block;
								width: 170rpx;
								height: 170rpx;
								margin-right: 30rpx;
							}

							.goods-box {
								display: inline-block;
								width: 400rpx;

								.goods-item-text {
									margin: 20rpx 0rpx;
									font-size: 28rpx;
									font-weight: 700;
									color: rgba(37, 38, 38, 1);
								}

								.box-let {
									.box-let-text {
										margin: 20rpx 0;
										font-size: 32rpx;
										font-weight: 700;
										color: rgba(3, 185, 209, 1);
									}

									.kucun {
										font-size: 20rpx;
										font-weight: 500;
										color: rgba(145, 144, 144, 1);
									}
								}
							}
						}
					}
				}
			}

			.category-footer {
				margin-top: 30rpx;
				padding: 30rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				background: rgba(255, 255, 255, 1);
				position: relative;

				.yuan {
					position: absolute;
					top: 30rpx;
					left: 20rpx;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					background: rgba(3, 185, 209, 0.3);
				}

				.slot-title {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(37, 38, 38, 1);
				}
			}
		}
	}
</style>